<template>
  <div class="tupup-box">
    <nav-bar title="充值截图上传" fixed='fixed' />
    <div class="content">
      <div class="tupup-info-box">
        <div class="tupup-info">
          <div class="name">充值金额</div>
          <div class="amount">{{$route.query.amount}}元</div>
        </div>
      </div>
      <div class="payName">转帐截图</div>
      <div class="payInfo" style="padding-top:.4rem;">
        <div class="screenshots">
          <div class="img">
            <van-uploader v-model="transferImgList" :after-read="afterRead" :max-count="1" />
          </div>
        </div>
      </div>
      <div class="payName">平台收款信息</div>
      <div class="payInfo">
        <div class="tupup-info bd-b">
          <div class="name">账户名</div>
          <div class="info">{{payInfo.payeeName}}</div>
        </div>
        <div class="tupup-info bd-b" v-if="payInfo.payeeAccount">
          <div class="name">银行卡号</div>
          <div class="info">{{payInfo.payeeAccount}}</div>
        </div>
        <div class="tupup-info bd-b" v-if="payInfo.payeeBankName">
          <div class="name">银行名称</div>
          <div class="info">{{payInfo.payeeBankName}}</div>
        </div>
        <div class="tupup-info bd-b" v-if="payInfo.payeeBankBranch">
          <div class="name">支行名称</div>
          <div class="info">{{payInfo.payeeBankBranch}}</div>
        </div>
        <div class="screenshots mt-50" v-if="payInfo.type !== 3">
          <div class="img">
            <img :src="payInfo.payeeAccountImg" />
          </div>
        </div>
      </div>
      <div class="submit">
        <j-botton type="danger" class="loginBtn" @click.native="rechargeSecond" style="margin-top:.78rem;">上传转账截图
        </j-botton>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'topup',
  data() {
    return {
      rechargeNo: '',
      transferImgList: [],
      transferImg: '',
      fileFormData: null
    };
  },
  created() {},
  computed: {
    payInfo: {
      get() {
        return JSON.parse(sessionStorage.getItem('payInfo')) || {};
      }
    }
  },
  mounted() {
    this.$set(this, 'rechargeNo', this.$route.query.rechargeNo);
  },
  methods: {
    afterRead(data) {
      var fileFormData = new FormData();
      fileFormData.append('file', data.file);
      this.fileFormData = fileFormData;
    },
    // 充值上传截图
    rechargeSecond() {
      let that = this;
      if (this.transferImgList.length === 0) {
        this.$toast('请上传转账截图!');
        return;
      }
      this.$API.global.fileUpload(this.fileFormData).then(res => {
        if (res.code === 0) {
          this.$set(this, 'transferImg', res.data.src);
          const options = {
            rechargeNo: this.rechargeNo,
            transferImg: this.transferImg
          };
          this.$API.user.rechargeSecond(options).then(res => {
            if (!res.code) {
              this.$toast('上传成功');
              this.$store.dispatch('setSettingInfo');
              setTimeout(() => {
                that.$router.push({
                  'path': this.$route.query.redirectURL
                });
              }, 1000);
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .tupup-box {
    .content {
      padding-bottom: 20px;
    }

    .submit {
      padding: 30px;

      .van-uploader {
        width: 100%;
        height: 100%;

        .van-uploader__wrapper {
          height: 100%;

          .van-uploader__upload,
          .van-uploader__preview {
            width: 100%;
            height: 100%;

            .van-uploader__upload-icon {
              display: none;
            }
          }
        }
      }
    }
  }

  .tupup-info-box {
    background-color: #fff;
    padding: 0 30px;
    margin-top: 20px;

    .tupup-info {
      display: flex;
      padding: 25px 0 25px;
      background-color: #fff;
      font-size: 30px;

      .name {
        color: #212121;
        width: 150px;
        text-align: left;
        margin-right: 10px;
      }

      .amount {
        flex: 1;
        color: #111;
      }
    }
  }

  .payName {
    color: #999;
    padding: 40px 30px;
    font-size: 24px;
  }

  .payInfo {
    margin: 0 30px;
    padding: 0 20px 20px;
    background-color: #fff;

    .tupup-info {
      display: flex;
      padding: 20px 0 20px;
      background-color: #fff;
      font-size: 30px;

      .name {
        color: #212121;
        width: 150px;
        text-align: left;
        margin-right: 10px;
      }

      .info {
        flex: 1;
        color: #838383;
      }
    }

    .screenshots {
      width: 338px;
      // height: 501px;
      background-color: #fff;

      // box-shadow: 0px 3px 9px 0px rgba(114, 112, 113, 0.2);
      .img {
        width: 100%;
        height: 100%;

      }
    }
  }

  /deep/ .van-uploader {
    .van-uploader__preview-image {
      height: auto;
    }
  }
</style>
